<template>
  <div>
    <div>
      <div class="search">
        <el-input v-model="key" placeholder="请输入内容"></el-input>
      </div>
      <div class="search1">
        <el-select v-model="value" placeholder="员工类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-table :data="userlist" border style="width: 100%">
      <el-table-column prop="_id" label="员工ID"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="userpwd" label="用户密码 (加密后)">
      </el-table-column>
      <el-table-column prop="usertype" label="项目组"> </el-table-column>
      <el-table-column prop="type" label="用户类型">
        <template slot-scope="scope">
          <el-button type="danger" v-if="scope.row.type == 1"
            >项目经理</el-button
          >
          <el-button type="success" v-if="scope.row.type == 3"
            >开发人员</el-button
          >
          <el-button type="warning" v-if="scope.row.type == 2"
            >测试人员</el-button
          >
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="danger" plain @click="deluser(scope.row)"
            >辞退员工</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="员工辞退"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <h2 class="msg">确认辞退该员工？该操作不可逆!</h2>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
    <div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="allpage"
        :page-size="pagesize"
        @current-change="change"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      centerDialogVisible: false,
      userid: "",
      key: "",
      allpage: 0,
      pagesize: 5,
      page: 1,
      options: [
        {
          value: "",
          label: "请选择员工类型",
        },
        {
          value: "2",
          label: "测试人员",
        },
        {
          value: "3",
          label: "开发人员",
        },
      ],
      value: "",
    };
  },
  computed: {
    ...mapState("managerInfo", ["userlist", "total"]),
  },
  created() {
    this.inituserlist({
      page: 1,
    })
      .then(() => {
        this.allpage = this.total;
      })
      .then(() => {
        console.log(this.allpage);
      });
  },
  watch: {
    key() {
      // this.page = 1; //查询条件发生改变以后 都是请求第一页
      // console.log(this.key);
      this.inituserlist({
        page: this.page,
        key: this.key,
        type: this.value,
      }).then(() => {
        this.allpage = this.total;
      });
    },
    value() {
      this.inituserlist({
        page: this.page,
        key: this.key,
        type: this.value,
      }).then(() => {
        this.allpage = this.total;
      });
    },
  },
  methods: {
    ...mapActions("managerInfo", ["inituserlist", "deleteuser"]),
    handleClick(row) {
      console.log(row);
    },
    deluser(info) {
      //   console.log(info);
      this.userid = info._id;
      this.centerDialogVisible = true;
      console.log(this.userid);
    },
    sure() {
      let _id = this.userid;
      this.deleteuser({ _id }).then(() => {
        this.inituserlist({
          page: this.page,
          key: this.key,
          type: this.value,
        }).then(() => {
          this.allpage = this.total;
        });
      });
      this.centerDialogVisible = false;
    },
    change(page) {
      this.page = page * 1;

      this.inituserlist({
        page: this.page,
        key: this.key,
        type: this.value,
      }).then(() => {
        this.allpage = this.total;
      });
    },
  },
};
</script>

<style scoped>
.msg {
  color: red;
  text-align: center;
}
.search {
  width: 400px;
  height: 80px;
  float: left;
}
.search1 {
  width: 200px;
  height: 40px;
  float: right;
}
</style>